<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>模拟发布订阅模式</title>
    <style></style>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      //事件触发器
      class EventEmitter {
        //记录所有事件,以及事件对应的处理函数
        constructor() {
          //为什么是对象在发布订阅模式里有说
          //{'click': [ fn1 , fn2 ] }
          this.subs = {}; // || Object.create(null)
        }
        //注册事件
        //第一个参数是事件类型,第二个参数是事件函数
        $on(eventType, hander) {
          this.subs[eventType] = this.subs[eventType] || [];
          this.subs[eventType].push(hander);
        }
        //触发事件
        $emit(eventType) {
          //如果存在
          if (this.subs[eventType]) {
            this.subs[eventType].forEach((hander) => {
              //直接调用
              hander();
            });
          }
        }
      }

      //测试
      let em = new EventEmitter();
      //注册事件
      em.$on("click", () => {
        console.log("click1");
      });
      em.$on("click", () => {
        console.log("click2");
      });
      //触发事件
      em.$emit("click");
    </script>
  </body>
</html>
